<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>首页</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
          <div class="layui-col-md6" id="main" style="height:400px;"></div>
          <div class="layui-col-md6" id="main2" style="height:400px;"></div>
          <div class="layui-col-md6" id="main3" style="height:400px;"></div>
          <div class="layui-col-md6" id="main4" style="height:400px;"></div>
          <div class="layui-col-md12" id="main5" style="height:400px;"></div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script>
  <script src="../../layuiadmin/layui/layui.js?t=1"></script>  
  <script>
  layui.config({
    base: '../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'console']);
  </script>

  <script type="text/javascript" th:inline="none">
    // 基于准备好的dom，初始化echarts实例
    var myChart5 = echarts.init(document.getElementById('main5'));
    $.get('/getsnum').done(function (resule) {
      myChart5.setOption({
        backgroundColor: '#2c343c',
        title: {
          text: '科目学生比例统计',
          left: 'center',
          top: 20,
          textStyle: {
            color: 'red'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        visualMap: {
          show: false,
          min: 1,
          max: 200000,
          inRange: {
            colorLightness: [0.3, 1]
          }
        },
        series: [
          {
            name: '学生分类',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              {value: resule.data.num[0], name: resule.data.name[0]},
              {value: resule.data.num[1], name: resule.data.name[1]},
              {value: resule.data.num[2], name: resule.data.name[2]},
              {value: resule.data.num[3], name: resule.data.name[3]}
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                color: '#00c1c2',
                shadowBlur: 200,
                shadowColor: 'rgba(106, 182, 194, 0.5)'
              }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      } );
    });
  </script>
</body>
</html>

